<template>
	<view class="content">
		<view class="top">
			<view class="topitem">
				<view class="info">
					<text style="font-size: 20px;font-weight: bold;">星期一</text>
				</view>
				<view>
					<uni-icons color="#fff" @click="Goto('/pages/tabbar/tabbar-1/class/class',2)" style="margin-right: 10px;" type="settings" size="30"></uni-icons>
					<uni-icons color="#fff" @click="Goto('/pages/search/index',2)" type="search" size="30"></uni-icons>
				</view>
			</view>
			<view class="laji">
				<view class="lajiitem">
					<view>干垃圾</view>
					<view>7:30-8:30</view>
				</view>
				<view class="lajiitem">
					<view><text>晚上</text>湿垃圾</view>
					<view>19:30-20:30</view>
				</view>
			</view>
			<swiper class="swiper" circular :autoplay="true" :interval="2000" :duration="500">
				<swiper-item>
					<view class="img1"></view>
					<!-- <image src="https://img-blog.csdnimg.cn/img_convert/ec13b1d884b422ad6ac1746504fa0454.png" mode=""></image> -->
				</swiper-item>
				<swiper-item>
					<view class="img2"></view>
					<!-- <image src="https://img-blog.csdnimg.cn/img_convert/462ba175388a6005201d8a73f186c527.png" mode=""></image> -->
				</swiper-item>
				<swiper-item>
					<view class="img3"></view>
					<!-- <image src="https://img-blog.csdnimg.cn/img_convert/213a362a143bd47b8b4e3dad5138d53d.png" mode=""></image> -->
				</swiper-item>
			</swiper>
			<view class="chart">
				<view class="chartitem">
					<uni-icons type="wallet-filled" color="#ff6e8f" size="30"></uni-icons>
					<view>投放日历</view>
				</view>
				<view class="chartitem" @click="Goto('/pages/tabbar/tabbar-2/tabbar-2',1)">
					<uni-icons type="map-filled" color="#5aead7" size="30"></uni-icons>
					<view>上门回收</view>
				</view>
				<view class="chartitem" @click="Goto('/pages/tabbar/tabbar-3/tabbar-3',1)">
					<uni-icons type="image-filled" color="#0b73d6" size="30"></uni-icons>
					<view>垃圾识别</view>
				</view>
				<view class="chartitem">
					<uni-icons type="calendar-filled" color="#ffc12d" size="30"></uni-icons>
					<view>每日签到</view>
				</view>
			</view>
		</view>
		<view class="but">
			<view class="everyday">
				<view class="daytop">
					<view>
						<text class="line"></text>
						<text style="margin: 0 5px;">限时兑换</text>
						<text>{{ daynow }}</text>
						<!-- <text style="margin-right: 160px;">{{ daynow }}</text> -->
					</view>
					<text style="color: #999;">更多</text>
				</view>
				<view class="daybut">
					<view class="butitem">
						<image src="../../../static/yl.png" mode=""></image>
						<view>200币</view>
						<view class="old">123</view>
					</view>
					<view class="butitem">
						<image src="../../../static/yl.png" mode=""></image>
						<view>200币</view>
						<view class="old">123</view>
					</view>
					<view class="butitem">
						<image src="../../../static/yl.png" mode=""></image>
						<view>200币</view>
						<view class="old">123</view>
					</view>
					<view class="butitem">
						<image src="../../../static/yl.png" mode=""></image>
						<view>200币</view>
						<view class="old">123</view>
					</view>
					<view class="butitem">
						<image src="../../../static/yl.png" mode=""></image>
						<view>200币</view>
						<view class="old">123</view>
					</view>
					<view class="butitem">
						<image src="../../../static/yl.png" mode=""></image>
						<view>200币</view>
						<view class="old">123</view>
					</view>
				</view>
			</view>
			<view class="everyday">
				<view class="daytop">
					<view>
						<text class="line"></text>
						<text style="margin: 0 5px;">热门讨论</text>
					</view>
					<text style="color: #999;">更多</text>
				</view>
				<view class="pinglun">
					<view class="pitem">
						<view class="title">有没有人吐槽最近的垃圾分类？
							<text>吐槽</text>
						</view>
						<view class="main">感觉最近整个人都不好了...</view>
						<view></view>
					</view>
					<view class="pitem">
						<view class="title">有没有人吐槽最近的垃圾分类？</view>
						<view class="main">感觉最近整个人都不好了...</view>
						<view></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				daynow: "",
				timenow: "",
				userinfo: {
					name: "",
					phone: "",
					avater: ""
				}
			};
		},
		mounted() {
			this.userinfo = uni.getStorageSync("userinfo")
		},
		onShow() {
			// 本地时间
			this.timenow = setInterval(() => {
				let timestamp = Date.parse(new Date());
				timestamp = timestamp / 1000;
				this.timestampToTime(timestamp)
			}, 1000)
			// 网络时间
			// this.timenow = setInterval(() => {
			// 	uni.request({
			// 		url: "https://worldtimeapi.org/api/timezone/UTC",
			// 		success: (res) => {
			// 			let timestamp = Date.parse(new Date(res.data.datetime));
			// 			timestamp = timestamp / 1000;
			// 			this.timestampToTime(timestamp)
			// 		},
			// 		fail(err) {
			// 			console.log("err", err);
			// 		}
			// 	})
			// }, 1000)
		},
		onUnload() {
			console.log('页面卸载');
			if (this.timenow) {
				clearInterval(this.timenow);
				this.timenow = null;
			}
		},
		//如果是tabbar页面 可在onHide中清除
		onHide() {
			console.log('页面yinchang');
			if (this.timenow) {
				clearInterval(this.timenow);
				this.timenow = null;
			}
		},
		methods: {
			Goto(path, lv) {
				if (lv == 1) {
					uni.switchTab({
						url:path
					})
				} else {
					uni.navigateTo({
						url: path
					})
				}
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				this.daynow = h + m + s
				// return Y + M + D + h + m + s;
				// let time = timestampToTime(1403058804);
				// console.log(timestampToTime(1403058804)); //2020-06-18 10:33:24
			}
		}
	};
</script>


<style scoped lang="scss">
	.content {
		height: 100vh;
	}

	.icon {
		width: 30px;
		height: 30px;
	}

	.top {
		background-color: #2bcddd;
		height: 220px;
		border-radius: 0 0 30px 30px;
		padding: 15px;
		padding-bottom: 0;
		color: #fff;
		margin-bottom: 170px;
	}

	.topitem {
		display: flex;
		justify-content: space-between;

		image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}

		.info {
			width: 100px;
			margin-right: 250rpx;
		}
	}


	.laji {
		margin-top: 10px;
		background-color: rgba(255, 255, 255, 0.5);
		display: flex;
		justify-content: space-between;
		padding: 20px;

		.lajiitem {
			display: flex;
			flex-direction: column;

			text {
				// font-size: 12px;
				padding: 2px;
				margin-right: 5px;
				border-radius: 5px;
				background-color: #ff5e81;
			}

		}
	}

	.swiper {
		// background-color: green;
		height: 300rpx;
		margin-top: 20px;
		border-radius: 10px;
	}

	.img1 {
		width: 100%;
		height: 100%;
		border-radius: 10px;
		background: url("https://img-blog.csdnimg.cn/img_convert/ec13b1d884b422ad6ac1746504fa0454.png") no-repeat;
		background-size: 100% 100%;
	}

	.img2 {
		width: 100%;
		height: 100%;
		border-radius: 10px;
		background: url("https://img-blog.csdnimg.cn/img_convert/213a362a143bd47b8b4e3dad5138d53d.png") no-repeat;
		background-size: 100% 100%;
	}

	.img3 {
		width: 100%;
		height: 100%;
		border-radius: 10px;
		background: url("https://img-blog.csdnimg.cn/img_convert/462ba175388a6005201d8a73f186c527.png") no-repeat;
		background-size: 100% 100%;
	}

	.chart {
		color: #000;
		display: flex;
		justify-content: space-between;
		margin: 10px 0;

		.chartitem {
			text-align: center;
			width: 100px;
		}
	}

	.but {
		background-color: #ecfdfa;
		// height: 200px;
		overflow: hidden;
	}

	.everyday {
		// height: 150px;
		margin: 10px 0;
		background-color: #fff;
		padding: 5px 15px;

		.daytop {
			display: flex;
			justify-content: space-between;
		}

		.line {
			width: 5px;
			height: 100%;
			display: inline-block;
			background-color: #ff5e81;
			border-radius: 5px;
			vertical-align: middle;
		}

		.daybut {
			margin: 10px 0;
			text-align: center;
			white-space: nowrap;
			overflow-x: auto;
			overflow-y: hidden;

			.butitem {
				display: inline-block;
				margin: 0 10px;
				width: 100px;

				image {
					width: 100px;
					height: 100px;
					box-shadow: 0 0 5px #000;
					border-radius: 5px;
				}
			}
		}

		.daybut::-webkit-scrollbar {
			display: none;
		}

		.old {
			text-decoration: line-through;
			color: #999;
		}
	}

	.pitem {
		margin: 15px 0;
		border-bottom: 0.5px solid #eee;

		.title {
			font-size: 16px;
			font-weight: bold;

			text {
				font-size: 12px;
				color: #fff;
				padding: 0 5px;
				margin-right: 5px;
				border-radius: 5px;
				background-color: #ff5e81;
			}
		}

		.main {
			margin: 15px 0;
			font-size: 12px
		}
	}
</style>